import React, { useState, useMemo } from 'react';
import { Layout, Menu, theme, Button } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import {
  DashboardOutlined,
  UserOutlined,
  ShoppingOutlined,
  ShoppingCartOutlined,
  AppstoreOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  LogoutOutlined,
} from '@ant-design/icons';
import { useAuth } from '../hooks/useAuth';
import { PermissionCode } from '../types/auth';

const { Header, Sider, Content } = Layout;

const AdminLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const { hasPermission, logout } = useAuth();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  // 处理退出登录
  const handleLogout = () => {
    logout();
    navigate('/admin/login');
  };

  // 根据权限动态生成菜单项
  const menuItems = useMemo(() => {
    const items = [
      {
        key: '/admin',
        icon: <DashboardOutlined />,
        label: '仪表盘',
      }
    ];

    // 用户管理菜单
    if (hasPermission(PermissionCode.USER_MANAGE)) {
      items.push({
        key: '/admin/users',
        icon: <UserOutlined />,
        label: '用户管理',
      });
    }

    // 分类管理菜单
    if (hasPermission(PermissionCode.CATEGORY_MANAGE)) {
      items.push({
        key: '/admin/categories',
        icon: <AppstoreOutlined />,
        label: '分类管理',
      });
    }

    // 商品管理菜单
    if (hasPermission(PermissionCode.PRODUCT_MANAGE)) {
      items.push({
        key: '/admin/products',
        icon: <ShoppingOutlined />,
        label: '商品管理',
      });
    }

    // 订单管理菜单
    if (hasPermission(PermissionCode.ORDER_MANAGE)) {
      items.push({
        key: '/admin/orders',
        icon: <ShoppingCartOutlined />,
        label: '订单管理',
      });
    }

    return items;
  }, [hasPermission]);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" style={{ height: 32, margin: 16, background: 'rgba(255,255,255,.2)' }} />
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
              style: { fontSize: '18px', padding: '0 24px', cursor: 'pointer' },
            })}
          </div>
          <Button
            type="text"
            icon={<LogoutOutlined />}
            onClick={handleLogout}
            style={{ marginRight: 24 }}
          >
            退出登录
          </Button>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            minHeight: 280,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout; 